<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="100px">
            <el-form-item label="业务员" prop="nickName">
                <el-input v-model="queryParams.nickName" placeholder="请输入用户名称" clearable />
            </el-form-item>
            <el-form-item label="业务员手机号" prop="phoneNumber">
                <el-input v-model="queryParams.phoneNumber" placeholder="请输入用户手机号" clearable />
            </el-form-item>
            <el-form-item label="注册开始时间">
                <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="注册结束时间">
                <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-finished" size="mini" v-hasPermi="['system:user:add']"
                    @click="addSales()">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row> -->

        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="用户昵称" align="center" prop="nickName" />
            <el-table-column label="手机号" align="center" prop="phoneNumber" />
            <el-table-column label="登录账号" align="center" prop="userName" />
            <el-table-column label="状态" align="center" prop="isItOnline">
                <template slot-scope="{row}">
                    <span v-if="row.isItOnline == 0" style="color: #13ce66;">上班</span>
                    <span v-else style="color: #999;">休息</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="区域推送" align="center" key="ifDistrictPush">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.ifDistrictPush" :active-value="1" :inactive-value="0"
                        @change="handleStatusChange1(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="省市" width="150" align="center" key="provinceCities">
                <template slot-scope="scope">
                    {{ getProvinceCities(scope.row.provinceCities) }}
                </template>
            </el-table-column> 
            <el-table-column label="所属承运商" align="center" prop="commonCarrier">
                <template slot-scope="scope">
                    {{ scope.row.commonCarrier }}
                </template>
            </el-table-column>-->
            <el-table-column label="当前跟进数据" align="center" prop="followUpCount" />
            <el-table-column label="总成交数据" align="center" prop="accomplishNumber"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <!-- <el-button size="mini" type="text" @click="queryInfo(row)">查看</el-button> -->
                    <!-- <el-button size="mini" type="text" @click="editSales(row)">修改</el-button> -->
                    <el-button size="mini" type="text" v-if="row.status == '0' && row.isItOnline != 0"
                        @click="salesOption(row, 1)">上班</el-button>
                    <el-button size="mini" type="text" v-if="row.status == '0' && row.isItOnline == 0"
                        @click="salesOption(row, 2)">下班</el-button>
                    <!-- <el-button size="mini" type="text" v-if="row.status == '0'"
                        @click="salesOption(row, 3)">禁用</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <detail-dialog :showDialog="showDetailDialog" :baseInfo="baseInfo" pageType="2" @close="close"></detail-dialog>

        <el-dialog width="700px" :title="title" :visible.sync="innerVisible" append-to-body>
            <div>
                <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户昵称" prop="nickName">
                                <el-input v-model="addForm.nickName" placeholder="请输入用户昵称" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="归属部门" prop="deptId">
                                <treeselect v-model="addForm.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="手机号码" prop="phonenumber">
                                <el-input v-model="addForm.phonenumber" placeholder="请输入手机号码" maxlength="11" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="addForm.email" placeholder="请输入邮箱" maxlength="50" />
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="登录账号" prop="userName">
                                <el-input v-model="addForm.userName" placeholder="请输入登录账号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="登录密码" prop="password">
                                <el-input v-model="addForm.password" placeholder="请输入登录密码" type="password"
                                    maxlength="20" show-password />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <!-- <el-form-item label="用户性别">
                                <el-select v-model="addForm.sex" placeholder="请选择性别">
                                    <el-option
                                    v-for="dict in dict.type.sys_user_sex"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item> -->
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-radio-group v-model="addForm.status">
                                    <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                                        :label="dict.value">{{ dict.label }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row>
                        <el-col :span="12">
                            <el-form-item label="岗位">
                                <el-select v-model="addForm.postIds" multiple placeholder="请选择岗位">
                                    <el-option
                                    v-for="item in postOptions"
                                    :key="item.postId"
                                    :label="item.postName"
                                    :value="item.postId"
                                    :disabled="item.status == 1"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="角色">
                                <el-select v-model="addForm.roleIds" multiple placeholder="请选择角色">
                                    <el-option
                                    v-for="item in roleOptions"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId"
                                    :disabled="item.status == 1"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <!-- <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input v-model="addForm.remark" type="textarea" placeholder="请输入内容"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="innerVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listSalers, salersUp, salersBelow, salersDisable, addSalerSave } from "@/api/crm/userManage";
import { addClue, getMarketList, manualDistribution } from "@/api/crm/clueLibrary";
import { deptTreeSelect, getUser, updateUser, addUser } from "@/api/system/user";
import DetailDialog from "@/views/crm/clue/detailDialog.vue";
import ProviceSelect from "@/components/ProviceSelect/index.vue"
import Enmu from '@/utils/enmu.js'
import { forrmatterEnmu } from "@/utils/index"
import { mapGetters } from "vuex"
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import { listChina } from "@/api/crm/china";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "SalesPerson",
    dicts: ['sys_normal_disable', 'sys_user_sex'],
    data() {
        return {
            fileUpload: process.env.VUE_APP_BASE_API + "/clue/admin/batchImportClue",
            headers: {
                Authorization: "Bearer " + getToken()
            },
            // 显示搜索条件
            showSearch: true,
            // 非单个禁用
            single: true,
            ids: [],
            // 非多个禁用
            multiple: true,
            Enmu,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                nickName: null,
                phoneNumber: null,
                startTime: null,
                endTime: null
            },
            baseInfo: {},
            showDetailDialog: false,
            innerVisible: false,
            addForm: {},
            loading: false,
            userList: [],
            total: 0,
            defaultAimCity: {},
            defaultCity: {},
            // 1 新增  2 分配
            dialogFlag: '',
            allocationClueId: [],
            marketList: [],
            selectMarketIds: '',
            fileList: [],
            // 部门树选项
            deptOptions: undefined,
            postOptions: [],
            roleOptions: [],
            // 表单校验
            rules: {
                userName: [
                    { required: true, message: "用户名称不能为空", trigger: "blur" },
                    { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                nickName: [
                    { required: true, message: "用户昵称不能为空", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "用户密码不能为空", trigger: "blur" },
                    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
                    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
                ],
                phonenumber: [
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ]
            },
            title: '',
            provinces: [],
            cityslist: [],
            regionslist: [],
        };

    },
    components: { DetailDialog, ProviceSelect, Treeselect },
    created() {
        this.getList();
        this.getDeptTree();
        this.getUserList();
        this.getlistChina()
    },
    computed: {
        ...mapGetters(['allCityList'])
    },
    methods: {
        forrmatterEnmu,
        // 省市区转换成中文
        fomatterAdressName(code) {
            let index = this.allCityList.findIndex(ele => ele.id == code);
            return index > -1 ? this.allCityList[index].cityName : code;
        },
        queryInfo(row) {
            this.showDetailDialog = true;
            this.baseInfo = { ...row };
        },
        getUserList() {
            this.resetQueryForm();
            getUser().then(response => {
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
            });
        },
        close() {
            this.showDetailDialog = false;
            this.getList();
        },
        /** 查询【请填写功能名称】列表 */
        getList() {
            this.loading = true;
            listSalers(this.queryParams).then(response => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        resetQueryForm() {
            this.addForm = {
                userId: undefined,
                deptId: undefined,
                userName: undefined,
                nickName: undefined,
                password: undefined,
                phonenumber: undefined,
                email: undefined,
                sex: undefined,
                status: "0",
                remark: undefined
            }
        },
        submitForm() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    if (this.addForm.userId) {
                        updateUser({
                            ...this.addForm,
                            postIds: [4],
                            roleIds: [106]
                        }).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.innerVisible = false;
                            this.getList();
                        });
                    } else {
                        addUser({
                            ...this.addForm,
                            postIds: [4],
                            roleIds: [106]
                        }).then(res => {
                            if (res.code == 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.innerVisible = false;
                                this.getList();
                            }
                        })
                    }
                }
            });
        },
        editSales(row) {
            this.resetQueryForm();
            const userId = row.userId || this.ids;
            getUser(userId).then(response => {
                this.addForm = response.data;
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.innerVisible = true;
                this.title = "修改销售";
                this.addForm.password = "";
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams = {};
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/user/export', {
                ...this.queryParams
            }, `user_${new Date().getTime()}.xlsx`)
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.clueId)
            this.single = selection.length !== 1
            this.multiple = !selection.length;
        },
        salesOption(row, flag) {
            if (flag == 1) {
                salersUp({ userId: row.userId }).then(res => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess("已上班");
                        this.getList();
                    }
                })
            } else if (flag == 2) {
                salersBelow({ userId: row.userId }).then(res => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess("下班啦~");
                        this.getList();
                    }
                })
            } else {
                this.$modal.confirm('是否确认禁用"' + row.userId + '"的用户？').then(() => {
                    salersDisable({ userId: row.userId }).then(res => {
                        if (res.code == 200) {
                            this.$modal.msgSuccess("已禁用");
                            this.getList();
                        }
                    })
                }).catch(() => { });
            }
        },
        // 是否推送修改
        handleStatusChange1(row) {
            let text = row.ifDistrictPush == "1" ? "打开区域推送" : "关闭区域推送";
            this.$modal
                .confirm('确认要"' + row.userName + '"用户"' + text + '"吗？')
                .then(function () {
                    console.log({...row,roleIds: [106]});
                    
                    return updateUser({...row,roleIds: [106]});
                })
                .then(() => {
                    this.$modal.msgSuccess(text + "成功");
                })
                .catch(function () {
                    row.ifDistrictPush = row.ifDistrictPush == "0" ? "1" : "0";
                });
        },
        getProvinceCities(value) {
            if (!value || value.length === 0) return ''
            const provinceMap = this.provinces.reduce((acc, item) => {
                acc[item.id] = item.cityName;
                return acc;
            }, {});
            const cityMap = this.cityslist.reduce((acc, item) => {
                acc[item.id] = item.cityName;
                return acc;
            }, {});
            const result = value.map(item => {
                const provinceName = provinceMap[parseInt(item.province)] || item.province;
                const provincePart = provinceName && provinceName !== '/' ? provinceName : '';

                const cityName = cityMap[parseInt(item.city)] || item.city;
                const cityPart = cityName && cityName !== '/' ? cityName : '';
                return `${provincePart}${cityPart}`;
            }).filter(item => item !== '').join(',');
            return result;
        },
        /** 查询省市区信息 */
        getlistChina() {
            var queryParams1 = {
                pageNum: 1,
                pageSize: 10000,
            };
            listChina(queryParams1).then(response => {
                this.provinces = response.rows.filter(item => item.depth == 1);
                this.cityslist = response.rows.filter(item => item.depth == 2);
                this.regionslist = response.rows.filter(item => item.depth == 3);
            });
        },
        // 新增销售人员
        addSales() {
            this.innerVisible = true;
            this.title = "新增销售";
            this.resetQueryForm();
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },

    }
};
</script>
<style lang="scss" scoped>
.row-between {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

::v-deep .el-timeline-item__node {
    background-color: #02A7F0 !important;
}

::v-deep .el-timeline-item__tail {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid #02A7F0;
}
</style>